<!-- 讲座 -->
<template>
	<view class="container">
		<view class="c-lecture">
			<view class="lecture-item" v-for="(item,index) in lectureList" :key="item.id" @click="toLectureDetail(item.id)">
				<view class="lecture-item-avatar">
					<image :src="baseURL + item.img" mode=""></image>
				</view>
				<view class="lecture-item-info">
					<text class="lecture-item-info_title">{{item.name}}</text>
					<text class="lecture-item-info_hint">{{item.desc}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"lecture",
		data() {
			return {
				// 课程老师列表
				lectureList:[]
			}
		},
		onLoad() {
			this.getLectureList()
		},
		methods: {
			// 获取课程列表
			getLectureList(){
				this.$http.getLectureList().then(res=>{
					this.lectureList = res
				})
			},
			// 跳转课程详情页
			toLectureDetail(id){
				uni.navigateTo({
					url:"/pages/pages_lecture/lectureDetail?id="+id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		.c-lecture{
			width: 100%;
			box-sizing: border-box;	
			.lecture-item{
				width: 100%;
				height: 200rpx;
				margin-bottom: 20rpx;
				border-radius: 15rpx;
				padding: 0 20rpx;
				box-sizing: border-box;
				display: flex;
				align-items: center;
				background-color: #fff;
				box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
				.lecture-item-avatar{
					&>image{
						border-radius: 10rpx;
						width: 150rpx;
						height: 150rpx;
						display: block;
					}
				}
				.lecture-item-info{
					display: flex;
					flex-direction: column;
					margin-left: 20rpx;
					.lecture-item-info_title{
						font-size: 38rpx;
						font-weight: bold;
					}
					.lecture-item-info_hint{
						width:400rpx;
						font-size: 30rpx;
						color: #666;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}
				}
			}
		}
	}
</style>
